<template>
  <div>
    <listLayoutVue>
      <template #title>用户列表</template>
      <template #operation>
        <Button class="mr16" type="primary" @click="handleUserAdd">新增用户</Button>
        <!-- <Button class="mr16" type="primary" @click="handleUserEdit">编辑用户</Button> -->
        <div class="d-inline-block mr16">
          <Poptip transfer confirm :disabled="Boolean(batchBtnDisabled)" title="确定删除?" @on-ok="handleUserRemove">
            <Tooltip content="请选择数据" transfer :disabled="Boolean(!batchBtnDisabled)" placement="top" theme="light">
              <Button type="primary">删除用户</Button>
            </Tooltip>
          </Poptip>
        </div>

        <Poptip transfer confirm :disabled="Boolean(batchBtnDisabled)" title="确定重置?" @on-ok="handleResetPwd">
          <Tooltip content="请选择数据" transfer :disabled="Boolean(!batchBtnDisabled)" placement="top" theme="light">
            <Button type="primary">重置密码</Button>
          </Tooltip>
        </Poptip>

        <Form
          class="custom-ivu-form d-inline-block ml15"
          inline
          style="vertical-align: 5px"
          @submit.native.prevent="handleFormSubmit"
        >
          <FormItem style="margin-bottom: 0">
            <Input
              v-model="formData.searchWords"
              :label-width="60"
              placeholder="请输入"
              class="form-item--width"
              size="large"
              clearable
            ></Input>
            <button class="button-empty-style ml5" type="submit">
              <Icon class="f30 pointer" type="ios-search" />
            </button>
          </FormItem>
        </Form>
        <span class="mr15">共有用户{{ pagination.total }}个</span>
      </template>

      <template #table>
        <CommonTablePage
          class="mt20 user-manage--table"
          :loading="tableLoading"
          :columns="columns"
          :tableData="tableData"
          :total="pagination.total"
          @on-selection-change="(s) => (selection = s)"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></CommonTablePage>
      </template>
    </listLayoutVue>

    <ModalCreateUser :visible.sync="visible.create" @on-add-success="handleFormSubmit"></ModalCreateUser>
    <ModaEditUser
      :visible.sync="visible.edit"
      :edit-item="currentEditItem"
      @on-add-success="handleFormSubmit"
    ></ModaEditUser>
  </div>
</template>

<script>
// components
import listLayoutVue from '@/components/listLayout/listLayout.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalCreateUser from './components/ModalCreateUser.vue'
import ModaEditUser from './components/ModaEditUser.vue'

//util
import { createCommonPagination } from '@/utils/service.js'
import { handleRequestStatus } from '@/utils/uitls'
// import { cloneDeep } from '@/utils/uitls.js'
import { createColumns, createForm } from './service'

import mixin from './mixin'
export default {
  name: 'UserManage',

  mixins: [mixin],

  components: { listLayoutVue, CommonTablePage, ModalCreateUser, ModaEditUser },

  data() {
    return {
      formData: createForm(),

      tableLoading: false,
      columns: createColumns(this),
      selection: [],
      tableData: [],
      pagination: createCommonPagination(),

      currentEditItem: {},

      visible: {
        create: false,
        edit: false,
      },
    }
  },

  computed: {
    batchBtnDisabled() {
      return this.selection.length === 0
    },
  },

  methods: {
    handleUserAdd() {
      this.visible.create = true
    },

    handleUserRemove() {
      if (this.batchBtnDisabled) return
      let requestCount = 0
      for (let i = 0, len = this.selection.length; i < len; i++) {
        const { userId, userName } = this.selection[i]
        this.systemUserDelete({ userId }).then((res) => {
          requestCount++
          if (res.data.status !== 0) {
            this.$Message.error('用户' + userName + res.data.message)
          } else if (requestCount === len) {
            this.$Message.success(res.data.message)
            this.handleFormSubmit()
          }
        })
      }
    },

    handleResetPwd() {
      if (this.batchBtnDisabled) return
      let requestCount = 0
      for (let i = 0, len = this.selection.length; i < len; i++) {
        const { userId, defaultPassword, userName } = this.selection[i]
        this.systemUserResetPassword({ userId, defaultPassword }).then((res) => {
          requestCount++
          if (res.data.status !== 0) {
            this.$Message.error('用户' + userName + res.data.message)
          } else if (requestCount === len) {
            this.$Message.success(res.data.message)
            this.handleFormSubmit()
          }
        })
      }
    },

    handleFormSubmit() {
      this.getSystemUserCount({ ...this.formData })
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit()
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit()
    },

    handleTableRowEdit(row) {
      this.currentEditItem = row
      this.visible.edit = true
    },

    handleTableRowDelete(row) {
      const { userId } = row
      this.systemUserDelete({ userId }).then((res) => {
        handleRequestStatus(res, '删除', this.handleFormSubmit)
      })
    },

    handleTableRowResetPwd(row) {
      const { userId, defaultPassword } = row
      this.systemUserResetPassword({ userId, defaultPassword }).then((res) => {
        handleRequestStatus(res, '重置密码', this.handleFormSubmit)
      })
    },
  },

  async mounted() {
    // await this.getSystemRoleList()
    this.handleFormSubmit()
  },
}
</script>

<style lang="less" scoped>
.user-manage--table {
  /deep/ .table-oper {
    .ivu-btn {
      padding: 0 4px;
    }
  }
}
</style>
